<template>
  <div class="container">
    <div class="button_content_box">
      <div class="button_box">
        <el-button :type="item.type" v-for="( item ,index ) in buttonList" :key="index" @click="changeButton(item)">{{item.text}}</el-button> <span class=" tip_text ">默认导出当前页面所有数据，导出指定数据请筛选</span>
      </div>
      <div class="search_box">
        <el-button @click="filterDrawer = true">
          <el-icon size="20"><SetUp /></el-icon>
          筛选
        </el-button>
        <el-input
        v-model="input3"
        class="grap_input"
        placeholder="多个用户名用英文逗号隔开"
      >
      <template #append>
        <el-button :icon="Search" />
      </template>
        </el-input>
      </div>
    </div>
    <div class="content">
          <div class="content_left">
          <el-input
            v-model="input2"
            style="width: 95%"
            placeholder="搜索部门"
            :prefix-icon="Search"
          />
          <div class="text_box">
            <img shape="square" style="width:30px;height:30px;" src="../../../assets/企.png" />
            <el-text class="mx-1" type="primary">尾号1438的公司</el-text>
          </div>
          <div class="text_box2">
            <el-text class="mx-1" type="info">新建部门</el-text>
            <el-text class="mx-1" type="info">管理部门</el-text>
          </div>
          </div>
          <div class="content_right">
            <el-table :data="tableData" style="width: 100%" max-height="800" :header-cell-style="{ background: '#fafafb', color: 'gray'}"  >
            <el-table-column prop="name" label="用户名" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="name" label="所在部门" />
            <el-table-column prop="name" label="授权账号" />
            <el-table-column prop="address" label="角色" >
              {{'1'}}
            </el-table-column>
            <el-table-column prop="address" label="状态" >
              {{'0'}}
            </el-table-column>
            <el-table-column prop="address" label="绑定登录手机号" >
              {{'1'}}
            </el-table-column>
            <el-table-column prop="date" label="最后登录时间" />
            <el-table-column prop="date" label="操作" >
              <el-button link type="primary">编辑</el-button>
              <el-button link type="primary">查看成员</el-button>
            </el-table-column>
          </el-table>
          </div>
      
    </div>
    <div class="page_box">
            <el-pagination
          v-model:current-page="params.pageNo"
          v-model:page-size="params.pageSize"
          :page-sizes="[100, 200, 300, 400]"
          background="background"
          layout="sizes, prev, pager, next,total"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
    </div>
    <el-drawer
      v-model="filterDrawer"
      title="筛选"
    >
      <el-form
      label-position="right"
      label-width="auto"
      :model="searchForm"
      style="max-width: 500px"
    >
      <el-form-item label="用户名:" >
        <el-input v-model="searchForm.name" />
      </el-form-item>
      <el-form-item label="账户名:" >
        <el-input v-model="searchForm.name" />
      </el-form-item>
      <el-form-item label="所属部门:" >
        <el-input v-model="searchForm.name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="filterDrawer = false">取消</el-button>
        <el-button type="primary" @click="filterDrawer = false">确认</el-button>
      </div>
    </template>
  </el-drawer>
  </div>



</template>

<script setup>

  import { ref , onMounted, } from 'vue'
  import { Search } from '@element-plus/icons-vue'

  let filterDrawer = ref(false)
  let searchForm = ref({
    name: ''
  })

  const buttonList = ref([
    {type: 'none',text: '邀请成员'},
    {type: 'none',text: '添加成员'},
    {type: 'none',text: '导出报表'}
  ])

  const activeName = ref('first')

  const params = ref({
    pageNo: 1,
    pageSize: 10
  })

  const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

  onMounted( () => {    
    buttonList.value[0].type = 'primary'
  })

  const changeButton = (item) => {
    buttonList.value.forEach(element => {
      element.type = 'none'
    });
    item.type = 'primary'
  }

</script>

<style scoped lang="less">
  .lunbo {
    width: 100%;
    height: 10%;
    margin-bottom: 10px;
  }

  .tab {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: small;
    background-color: #ffffff;
    border-radius: 5px;
    height: 80px;
    color: gray;
    box-shadow: 2px 2px 5px 1px gainsboro;
  }
  .tab_item{
    display: flex;
    flex-direction: column;
  }
  .tab_item :nth-child(2) {
    font-weight: bold;
    color: var(--main-blue);
    font-size: large;
  }
  .button_content_box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .search_box{
    display: flex;
    justify-content: flex-end;
    width: 40%;
  }
  .grap_input{
    width: 50%;
    margin-left: 10px;
  }
  .round_box{
    cursor: pointer;
    border: gainsboro solid 1px;
    border-radius: 10px;
    padding: 5px;
    background: var(--main-blue);
    color: #ffffff;
  }
  .tip_text{
    font-size: small;
    color: gray;
  }
  .content{
    display: flex;
    justify-content: space-between;
    height: 85%;
  }
  .content_left {
    width: 15%;
    border-right: 1px solid gainsboro;
  }
  .content_right {
    width: 84%;
  }
  .text_box{
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
  .text_box2{
    width: 60%;
    display: flex;
    justify-content: space-around;
  }

</style>